<template>
	<view class="search_box">
		<view class="search_box_top">
			<view @click="backReturn" class="search_box_top_back">
				<image src="../../../static/home/search_left.png" mode="widthFix"></image>
			</view>
			<view class="search_box_top_input_box">
				<u-search v-model="goods.name" @clear="clear" @search="search" placeholder="搜索" bgColor="#ffffff"
					:showAction="false" class="search_box_top_input" :clearabled="true"></u-search>
			</view>
		</view>
		<!-- 
		<view v-show="true" class="historicalSearch" v-for="(item,index) in goodslist">
			<view class="historicalSearch_title">
				搜索历史
			</view>
			<view class="historicalSearch_content">
				<view class="historicalSearch_content_list">
					电脑
				</view>
			</view>
		</view> -->

		<view class="ListBoxContent">

			<view @click="detail(item.tao_id)" v-for="(item,index) in List" class="VIPMall_content_list">
				<view class="VIPMall_content_list_image">
					<image :src="item.pict_url" mode=""></image>
				</view>
				<view class="VIPMall_content_list_content">
					<view class="VIPMall_content_list_content_title">
						{{item.title}}
					</view>
					<view class="VIPMall_content_list_content_center">
						<view class="VIPMall_content_list_content_center_left">
							淘宝价 ¥{{Number(item.size)}}
						</view>
						<view class="VIPMall_content_list_content_center_left">
							已售{{item.volume}}
						</view>
					</view>
					<view class="VIPMall_content_list_content_bottom">
						<view class="VIPMall_content_list_content_bottom_left">
							<text>券后价&nbsp;¥</text>
							{{Number(item.quanhou_jiage)}}
						</view>
						<view class="VIPMall_content_list_content_bottom_right">
							<view class="VIPMall_content_list_content_bottom_right_border_box">
								<view class="VIPMall_content_list_content_bottom_right_border">
									<text>￥{{Number(item.coupon_info_money)}}</text>
									<text>元券</text>
								</view>
							</view>
						</view>
					</view>

					<view class="VIPMall_content_list_content_yongjin">
						<view class="VIPMall_content_list_content_yongjin_left">
							佣金
						</view>
						<view class="VIPMall_content_list_content_yongjin_right">
							<view class="VIPMall_content_list_content_yongjin_right_view">
								￥{{commission(item)}}
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- <view v-for="(item,index) in goodslist"  class="ListBoxContent_list"  @click="detail(item)">
				<view class="ListBoxContent_list_image">
					<image :src="item.mainImages" mode="" style="width: 400upx;height: 250upx;"></image>
				</view>
				<view class="ListBoxContent_list_content">
					<view class="ListBoxContent_list_content_title">
						{{item.name}}
					</view>
					<view class="ListBoxContent_list_content_text">
						VIP价<text class="ListBoxContent_list_content_text_numTi">￥</text><text
							class="ListBoxContent_list_content_text_num">{{item.memberPrice}}</text><text
							class="ListBoxContent_list_content_text_Past">{{item.price}}</text>

					</view>
				</view>
			</view> -->

			<u-back-top :iconStyle="iconStyle" :scrollTop="scrollTop" mode="square"></u-back-top>
			<u-loadmore @loadmore="addmodle" :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		bootgoodsselectdetail,
		bootgoodsselectgoodsSpecifications,
		bootgoodsSpecificationsNumselectNum,
		bootgoodsselectpage,
		taobaolist,
		bootsysConfigcommissionpercent
	} from '@/api/home'
	export default {
		data() {
			return {
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				},
				scrollTop: 0,
				goodslist: [],
				goods: {
					pageSize: 10,
					pageNum: 1,
					name: '',
				},
				status: "loadmore",
				queryInquire: {
					pageSize: 10,
					page: 1,
					queryParams: "",
					type: 0
				},
				loding: false,
				List: [],
				over: false,
				bilv: 0
			}
		},
		onLoad() {
			// this.goodslists();
			this.bootsysConfigcommissionpercent();
		},
		created() {
			this.queryInquire.page = 1
			this.List = []
			this.over = false
			this.status = 'loadmore'
			this.addmodle();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			// this.goods.pageNum++;
			// this.goodslists()
			this.addmodle();
		},
		methods: {
			commission(item) {
				return ((item.quanhou_jiage * 0.15) * this.bilv).toFixed(2);
				// return row
			},
			// commission(item) {
			// 	return ((item * 0.15) * this.bilv).toFixed(2);
			// 	// return row
			// },
			bootsysConfigcommissionpercent() {
				bootsysConfigcommissionpercent().then(res => {
					this.bilv = Number(res.data) / 100
					console.log(this.bilv)
				})
			},
			addmodle() {
				if (this.over == true) {
					return;
				}
				if (this.status == "loadmore") {
					this.taobaolist();
				}
			},
			clear(e) {
				this.queryInquire.queryParams = '';
				this.queryInquire.page = 1
				this.List = []
				this.over = false
				this.status = 'loadmore'
				this.addmodle();
			},
			search(e) {
				this.queryInquire.queryParams = e;
				this.queryInquire.page = 1
				this.List = []
				this.over = false
				this.status = 'loadmore'
				this.addmodle();
			},
			taobaolist() {
				this.status = "loading";
				taobaolist(this.queryInquire)
					.then((res) => {
						if (res.success == 1) {
							this.List = this.List.concat(res.data);
							if (res.data.length < 10) {
								this.over = true;
								setTimeout(() => {
									this.status = "nomore";
								}, 0);
							} else {
								this.queryInquire.page++;
							}
						}
					})
					.finally(() => {
						this.status = "loadmore";
					});
			},
			// search() {
			// 	this.goodslist = [];
			// 	this.goodslists();
			// },

			goodslists() {
				bootgoodsselectpage(this.goods).then(res => {
					if (res.data.records.length != 0) {
						for (let sss in res.data.records) {
							this.goodslist.push(res.data.records[sss]);
						}
					} else {
						this.goods.pageNum--;
						uni.showToast({
							title: '无更多商品',
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			detail(row) {
				uni.navigateTo({
					url: "/pages/index/Taobaodetail/Taobaodetail?id=" + row,
				});
			},
			backReturn() {
				uni.navigateBack({
					// animationType: 'slide-out-right',
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #E8EAED;
	}

	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.search_box {
		padding-top: var(--status-bar-height);
		overflow: hidden;

		.search_box_top {
			position: fixed;
			width: 100%;

			display: flex;
			align-items: center;
			z-index: 100;
			// background-color: #E8EAED;
			background-color: #e8eaed;
			top: 0;
			// height: 150upx;
			padding: 22upx;
			padding-top: calc(22upx + var(--status-bar-height));

			.search_box_top_back {
				padding: 0 32upx;
				width: 82upx;

				image {
					width: 18upx;
				}
			}

			.search_box_top_input_box {
				width: calc(100% - 80upx);

				.search_box_top_input {
					background: #FFFFFF;
					border-radius: 34upx;

					/deep/ .u-search__content {
						border-radius: 34upx !important;
					}

					/deep/ .uni-input-input {
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 34upx;
					}
				}
			}
		}

		.historicalSearch {

			padding: 32upx;
			padding-top: 52upx;

			.historicalSearch_title {
				font-size: 34upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 48upx;
			}

			.historicalSearch_content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.historicalSearch_content_list {
					padding: 4upx 28upx;
					background: rgba(0, 0, 0, 0.1);
					border-radius: 22upx;
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.9);
					line-height: 34upx;
					margin-top: 22upx;
				}
			}
		}


		.ListBoxContent {
			margin-top: 108upx;
			// padding: 40upx 30upx;
			// // margin-top: 34upx;
			// display: flex;
			// flex-wrap: wrap;

			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 10upx;
			padding-bottom: 0;

			.VIPMall_content_list {
				width: calc((100% - 10upx) / 2);
				margin-bottom: 10upx;

				.VIPMall_content_list_image {
					width: 100%;
					height: 360upx;
					border-radius: 16upx 16upx 0px 0px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.VIPMall_content_list_content {
					background-color: #FFFFFF;
					// height: 160upx;
					border-radius: 0 0 16upx 16upx;
					padding: 16upx 20upx 10upx 20upx;

					.VIPMall_content_list_content_title {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.9);
						line-height: 40upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.VIPMall_content_list_content_center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 18upx;
						color: #888;
						padding: 10upx 0;
						text-overflow: ellipsis;
						white-space: nowrap;
					}


					.VIPMall_content_list_content_bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.VIPMall_content_list_content_bottom_left {
							color: #fc4d52;
							white-space: nowrap;
							font-size: 36upx;
							position: relative;
							line-height: 44upx;
							height: 44upx;

							text {
								font-size: 9upx;
							}
						}

						.VIPMall_content_list_content_bottom_right {
							.VIPMall_content_list_content_bottom_right_border_box {
								overflow: hidden;

								.VIPMall_content_list_content_bottom_right_border {
									font-style: normal;
									border-radius: 6upx;
									text-align: center;
									// border: 2upx solid #fd5a5f;
									text-overflow: ellipsis;
									white-space: nowrap;
									// background: #fff;
									color: #FFFFFF;
									background: linear-gradient(90deg, #EEC75D 0%, #F5E3C5 100%);
									padding: 6upx 16upx;
									font-size: 18upx;
									position: relative;

									&:after {
										content: '';
										position: absolute;
										left: -4px;
										top: 50%;
										margin-top: -3px;
										background: #fff;
										display: block;
										width: 5px;
										height: 5px;
										content: "";
										border-radius: 10px;
										border: 1px solid #FFFFFF;
									}

									&:before {
										position: absolute;
										left: auto;
										top: 50%;
										margin-top: -3px;
										background: #fff;
										display: block;
										width: 5px;
										height: 5px;
										content: "";
										border-radius: 10px;
										border: 1px solid #FFFFFF;
										right: -4px;
									}

									text {
										&:last-child {
											// border-right: 1px dashed #fd5a5f;
											// position: relative;
											margin-right: 8upx;

										}

										&:first-child {
											// border-right: 1px dashed #fd5a5f;
											// padding: 0 4upx;
											padding: 0 2upx;
										}
									}
								}
							}
						}
					}

					.VIPMall_content_list_content_yongjin {
						display: flex;
						margin-top: 16upx;

						.VIPMall_content_list_content_yongjin_left {
							background: linear-gradient(180deg, #868686 0%, #333333 100%);
							opacity: 1;
							border-radius: 8upx 0px 0px 8upx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 5upx 10upx;
							font-size: 16upx;
							font-family: PingFang SC;
							font-weight: 400;
							// line-height: 42upx;
							white-space: nowrap;
							color: #F1D388;

						}

						.VIPMall_content_list_content_yongjin_right {
							// height: 100%;
							// border: 2upx solid #707070;
							background: linear-gradient(180deg, #868686 0%, #333333 100%);
							opacity: 1;
							border-radius: 0px 8upx 8upx 0px;
							display: flex;
							justify-content: center;
							align-items: center;

							.VIPMall_content_list_content_yongjin_right_view {
								width: calc(100% - 4upx);
								height: calc(100% - 4upx);
								background-color: #ffffff;
								border-radius: 0px 8upx 8upx 0px;
								font-size: 16upx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333333;
								padding: 5upx 10upx;

							}
						}
					}
				}
			}

		}
	}
</style>
